<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SMValidator Tutor 1</title>
    <link rel="stylesheet" href="monokai-sublime.css">
    <link rel="stylesheet" href="style.css">
    <script src="highlight.pack.js"></script>
    <script src="../dist/SMValidator.js"></script>
</head>

<body>
    <form>
        <ol>
            <li>
                <p>学习SMVlidator要从一个故事开始，很久很久以前，老板叫你校验一个表单，没填内容的时候提示一下，你就写了下面几行代码</p>
                <pre><code class="html">
&lt;!--失去焦点时校验--&gt;
&lt;input data-rule="required" type="text"&gt;
&lt;script&gt;
    new SMValidator('form');
&lt;/script&gt;
                </code></pre>
                <input data-rule="required" type="text">
            </li>
            <li>
                <p>但是老板看不懂英文，你就改成这样</p>
                <pre><code class="html">
&lt;input data-rule="required(请输入内容)" type="text"&gt;
                </code></pre>
                <input data-rule="required(请输入内容)" type="text">
            </li>
            <li>
                <p>老板要求只能输入字母</p>
                <pre><code class="html">
&lt;input data-rule="/^[A-Z]*$/只能填写大写字母" type="text"&gt;
                </code></pre>
                <input data-rule="/^[A-Z]*$/只能填写大写字母" type="text">
                <pre><code class="html">
&lt;!--还要不区分大小写--&gt;
&lt;input data-rule="/^[A-Z]*$/i/请输入字母" type="text"&gt;
                </code></pre>
                <input data-rule="/^[A-Z]*$/i/请输入字母" type="text">
            </li>
            <li>
                <p>完成后老板来检查，不填内容没提示了。于是你用"|"把两个规则合在了一起</p>
                <pre><code class="html">
&lt;input data-rule="required(请输入内容)|/^[A-Z]*$/只能填写大写字母" type="text"&gt;
                </code></pre>
                <input data-rule="required(请输入内容)|/^[A-Z]*$/只能填写大写字母" type="text">
            </li>
            <li>
                <p>老板喜欢粉红色，他希望校验失败时input背景变成粉红色？你使用failCss来处理</p>
                <pre><code class="html">
&lt;!--给input添加类名为error的样式--&gt;
&lt;input data-rule="required|failCss(error)" type="text"&gt;
                </code></pre>
                <input data-rule="required|failCss(error)" type="text">
                <pre><code class="html">
&lt;!--但是还不够，老板希望input的父容器都粉红色--&gt;
&lt;!--"+"可以把样式应用到input的父容器，还可以使用"++"影响父容器的父容器--&gt;
&lt;input data-rule="required|failCss(error,+error)" type="text"&gt;
                </code></pre>
                <input data-rule="required|failCss(error,+error)" type="text">
            </li>
            <li>
                <p>第二天，老板心情改了，他不要红色背景，只需要input文字变成紫色。failStyle自定义内联样式</p>
                <pre><code class="html">
&lt;!--failStyle只接受一个JSON格式(允许单引号)参数，但不能使用"+"来影响它的父容器--&gt;
&lt;input data-rule="/^[A-Z]*$/只能填写大写字母|failStyle({'color':'#c3f'})" type="text"&gt;
                </code></pre>
                <input data-rule="/^[A-Z]*$/只能填写大写字母|failStyle({'color':'#c3f'})" type="text" placeholder="输入数字试试">
            </li>
            <li>
                <p>老板琢磨了一会儿，觉得校验成功后也要有样式。passCss/passStyle用于在校验成功时修改样式</p>
                <pre><code class="html">
&lt;input data-rule="/^[A-Z]*$/只能填写大写字母|passCss(success)|passStyle({'color':'#090'})" type="text"&gt;
                </code></pre>
                <input data-rule="/^[A-Z]*$/只能填写大写字母|passCss(success)|passStyle({'color':'#090'})" type="text">
            </li>
            <li>
                <p>默认的失败消息会包含在一个color为#c00的span里。<br>但是老板不喜欢span，他要可以加粗文字的b，怎么办呢？于是你研究起failHtml</p>
                <pre><code class="html">
&lt;!--把失败消息嵌到自定义样式的b中--&gt;
&lt;input data-rule="required|failHtml(&lt;b style='color:#f00'&gt;&lt;/b&gt;)" type="text"&gt;
                </code></pre>
                <input data-rule="required|failHtml(<b style='color:#f00'></b>)" type="text">
                <pre><code class="html">
&lt;!--后面老板又说消息太啰嗦了，他只要一个&times;图标，然后你用"!"忽略消息文本--&gt;
&lt;input data-rule="required|failHtml(!&lt;b style='color:#f00'&gt;&times;&lt;/b&gt;)" type="text"&gt;
                </code></pre>
                <input data-rule="required|failHtml(!<b style='color:#f00'>&times;</b>)" type="text">
                <pre><code class="html">
&lt;!--大道至简，你觉得这样完美了，但是这样老板就不知道他的输入出了什么问题，于是他要求在图标后面加回消息，纳尼？--&gt;
&lt;!--你用","把需求连在一起就解决了，so easy。但要注意的一点是书写顺序和显示顺序是相反的，2333--&gt;
&lt;input data-rule="required|failHtml(&lt;b style='color:#f00'&gt;&lt;/b&gt;,!&lt;b style='color:#f00'&gt;&times;&lt;/b&gt;)" type="text"&gt;
                </code></pre>
                <input data-rule="required|failHtml(<b style='color:#f00'></b>,!<b style='color:#f00'>&times;</b>)" type="text">
                <pre><code class="html">
&lt;!--刚嘘一口气，老板的需求又来了，他要在input外面加一个虚线框，要你把消息放在框的外面--&gt;
&lt;!--是不是想蹦起来把老板砍了？先别急，记得failCss吗？我们可以用"+"影响到input的父容器--&gt;
&lt;input data-rule="required|failHtml(+&lt;b style='color:#f00'&gt;&lt;/b&gt;,!+&lt;b style='color:#f00'&gt;&times;&lt;/b&gt;)" type="text"&gt;
                </code></pre>
                <span class="ring">
                    <input data-rule="required|failHtml(+<b style='color:#f00'></b>,!+<b style='color:#f00'>&times;</b>)" type="text">
                </span>
                <pre><code class="html">
&lt;!--眼看就要下班了，你老板看你闲着，就突发灵感，他要求虚线框放到input的上面，消息放在框的里面--&gt;
&lt;!--机智的你通过css选择器得到这个框作为消息容器，为了防止消息容器消失你又在前面加了个"*"--&gt;
&lt;!--使用"*"可以在验证成功时不隐藏消息容器，当*!+同时出现时，必须按*!+++这个顺序--&gt;
&lt;input data-rule="required|failHtml(*.boss-ring)" type="text"&gt;
                </code></pre>
                <div class="boss-ring"></div>
                <input data-rule="required|failHtml(*.boss-ring)" type="text">
                <pre><code class="html">
&lt;!--下班后，当你得意洋洋地走出公司时，老板追着你喊：“&times;怎么不见了，文字也要红色啊。。。。。。”--&gt;
                </code></pre>
            </li>
            <li>
                <p>第三天，虽然前一天的需求没完成，但是老板还是觉得你是个人才，于是既往不咎，新的需求开始。<br>他现在需要一个只能输入数字的表单，而且只能在失去焦点时校验</p>
                <pre><code class="html">
&lt;!--你心里暗想，这还不简单，把input事件禁用就可以了--&gt;
&lt;!--number是内置规则，除此外还有email/range/length/equal--&gt;
&lt;!--disinput禁止oninput时校验--&gt;
&lt;input data-rule="number|disinput" type="text"&gt;
                </code></pre>
                <input data-rule="number|disinput" type="text">
            </li>
            <li>
                <p>老板看了后不满意，他觉得在输入的时候要恢复原来的样式</p>
                <pre><code class="html">
&lt;!--focus可以让在input获得焦点时恢复原来的样式--&gt;
&lt;input data-rule="number|disinput|focus" type="text"&gt;
                </code></pre>
                <input data-rule="number|disinput|focus" type="text">
            </li>
            <li>
                <p>老板满意地点点头，但他觉得最好是能够在失去焦点时也不要校验</p>
                <pre><code class="html">
&lt;!--虽然你一脸懵逼，但还是照做了--&gt;
&lt;input data-rule="number|disinput|disblur" type="text"&gt;
                </code></pre>
                <input data-rule="number|disinput|disblur" type="text">
            </li>
            <li>
                <p>这时老板发火了，说你忽悠他，说好的校验数字在哪里？你只好在input旁边做个按钮，点击时校验</p>
                <pre><code class="html">
&lt;!--设置manul后为手动校验，相当于设置了disinput和disblur--&gt;
&lt;!--SMValidator.validate(inputs);使用js代码手动校验，inputs可以是css选择器，也可以是包含input对象的数组--&gt;
&lt;input id="manul" data-rule="number|manul" type="text"&gt;
&lt;a href="javascript:SMValidator.validate('#manul');"&gt;校验是否为数字&lt;/a&gt;
                </code></pre>
                <input id="manul" data-rule="number|manul" type="text">
                <a href="javascript:SMValidator.validate('#manul');">校验是否为数字</a>
            </li>
            <li>
                <p>又快到下班时间，老板见你还是那么悠闲，于是又提了个需求
                    <ul>
                        <li>要求字段必填，且中文提示</li>
                        <li>只能输入字母，不区分大小写</li>
                        <li>校验失败时input文字为紫色，边框红色，背景色为粉红色</li>
                        <li>校验成功时input的文字和边框都为绿色</li>
                        <li>失败消息文字红色加粗</li>
                        <li>消息前面有一个&times;</li>
                    </ul>
                </p>
                <pre><code class="html">
&lt;!--于是乎你就把之前的功能都串了起来--&gt;
&lt;input data-rule="required(请输入内容)|/^[A-Z]*$/i/请输入字母|failCss(error)|failStyle({'color':'#c3f','border':'1px solid #f00'})|passCss(success)|passStyle({'color':'#090'})|failHtml(&lt;b style='color:#f00'&gt;&lt;/b&gt;,!&lt;b style='color:#f00'&gt;&times;&lt;/b&gt;)" type="text"&gt;
                </code></pre>
                <input data-rule="required(请输入内容)|/^[A-Z]*$/i/请输入字母|failCss(error)|failStyle({'color':'#c3f','border':'1px solid #f00'})|passCss(success)|passStyle({'color':'#090'})|failHtml(<b style='color:#f00'></b>,!<b style='color:#f00'>&times;</b>)" type="text">
            </li>
            <li>
                <p>第四天，老板给你四个表单，一个校验数字，一个校验邮件，两个校验字母，要求用一样的样式。<br>你翻开昨天的代码，一看就傻了眼，这一大串html都是什么鬼，赶紧翻开 <b><a href="tutor2.html">教程2</a></b> 压压惊</p>
            </li>
        </ol>
    </form>

    <script>
        hljs.initHighlightingOnLoad();
        new SMValidator('form');
    </script>
</body>

</html>